<script setup>
import { ref, watch } from "vue"
import { defineProps } from "vue"
import { useRoute,useRouter } from "vue-router"
import BookPopup from "@/components/book-popup/activityBookPopup.vue"
import { getSalesVolume } from "@/utils/index.js"
import {getToken} from "@/utils/user.js";
const router = useRouter()
const props = defineProps({
  deckBookChange: Number,
  ticketTypeTreeItem: Object,
  first: Boolean,
  spotId: String,
});

const show = ref(false)
const route = useRoute()
const scenicId = route.params.id

const sessionlist = ref([])
const marketPrice = ref(null)
const depositPrice = ref(null)
// 弹出框
const productid = ref("")
const sortid = ref("")
const buyLimitCountvalue =ref(99)
watch(() => props.deckBookChange, () => {
  if (props.first) {
    handelyud(props.ticketTypeTreeItem.goodsInfoList[0], props.ticketTypeTreeItem.id)
  }
})


const handelyud = (item, scenicSpotTicketid) => {
  if(!getToken()){
    router.push('/login')
    return
  }
  console.log('handelyud',item)
//   if(item.)
  marketPrice.value = item.marketPrice
  depositPrice.value = item.deposit
  productid.value = item.id
  if (item.buyLimitCount) {
    buyLimitCountvalue.value = item.buyLimitCount
  }

  const params = {
    id: item.id,
  };
  if (scenicSpotTicketid) {
    sortid.value = scenicSpotTicketid
    params.kindsId = scenicSpotTicketid
  }
  show.value = true
};

const closePopup = () => {
  console.log("closePopup")
  show.value = false
};

const stringToArray = (str) => {
  const list = str?.split(',') ?? []
  return list.filter(item => item)
}

</script>
<template>
  <div class="header" v-if="props?.ticketTypeTreeItem?.name">
    <h1 class="title">
      {{ props.ticketTypeTreeItem.name }}
    </h1>
    <div class="line" />
  </div>
  <div class="ticket">
    <div class="card" v-for="item in props.ticketTypeTreeItem.goodsInfoList" :key="item.id">
      <div class="card_left">
        <span class="name">{{ item?.ticketName }}</span>

        <div class="tab_list">
          <span v-if="item.deposit" class="tab label"  style="color: red;background: rgba(255, 102, 0, 0.1) !important;border-radius: 3px">
            押金{{ item.deposit }}
          </span>
          <span v-if="item?.sellCount" class="tab sales_volume">
            月售{{ getSalesVolume(item?.sellCount) }}
            <span v-if="(item?.sellCount > 100)"> </span>
          </span>

          <span class="tab label" v-for="item in stringToArray(item.labels)" :key="item">
            {{ item }}
          </span>
          <div 
            class="tab"
            v-if="item.ticketsDetailsVoList?.length > 0 || item.refundType === '0' || item.productDetail"
          >
            <div class="booking_instructions">
              <div v-if="item.refundType === '0'" class="cancel">
                <span>不可取消</span>
                <div class="line"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card_right">
        <div class="price_box">
          <div class="price">
            ￥
            <span class="number">
              {{ item?.marketPrice }}
            </span>
<!--            <span class="qi">-->
<!--              起-->
<!--            </span>-->
          </div>
          <div v-if="item?.marketPrice" class="market_price">￥{{ item.unitPriceStandard }}</div>
        </div>
        <div class="book_button" @click="handelyud(item, props.ticketTypeTreeItem.id)">预订</div>
      </div>
    </div>
  </div>
  <BookPopup
    v-if="show"
    :showPopup="show"
    :goodsInfoList="props.ticketTypeTreeItem.goodsInfoList"
    :sessionlist="sessionlist"
    :scenicId="scenicId"
    :sortid="sortid"
    :marketPrice="marketPrice"
    :productid="productid"
    :title="props.ticketTypeTreeItem.name"
    :buyLimitCountvalue="buyLimitCountvalue"
    :kindsId="props.ticketTypeTreeItem.id"
    @closePopup="closePopup"
    :spotId="props.spotId"
    :deposit="depositPrice"
  />
</template>

<style lang="scss" scoped>
.header {
  margin-left: 2rem;

  .title {
    font-weight: bold;
    font-size: 1.8rem;
    color: #333333;
  }

  .line {
    // border-bottom: 2px solid red;
    width: 3rem;
    height: 0.6rem;
    background: linear-gradient(90deg, #4FAC91 0%, #ECE3AA 83%);
    border-radius: .3rem;
    margin-top: 0.2rem;
  }
}

.ticket {
  margin: 1rem 2rem 1.5rem 2rem;
  background: #FFFFFC;
  box-shadow: 0 .7rem 1.5rem 0 rgba(54, 141, 88, 0.05);
  border-radius: 1rem;

  .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: .1rem #EEEEEE solid;

    .card_left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        word-break: break-all;
        font-size: 1.6rem;
        color: #333333;
        font-weight: bold;
      }

      .tab_list {
        display: flex;
        flex-wrap: wrap;
        margin-top: .8rem;

        .tab {
          display: flex;
          align-items: center;
          margin-right: .8rem;
          height: 1.7rem;
          line-height: 1.7rem;
          font-size: 1.3rem;
          color: #999999;
          margin-bottom: .5rem;

          .booking_instructions {
            display: flex;
            align-items: center;
            margin-right: .2rem;
            .cancel{
              display: flex;
              align-items: center;
              .line{
                margin: 0 .5rem;
              }
            }
          }
        }

        .sales_volume {
          height: 1.7rem;
          line-height: 1.7rem;
          background: rgba(79, 172, 145, 0.1);
          border-radius: .3rem;
          padding: 0 .5rem;
          font-size: 1.2rem;
          color: var(--van-primary-color);
        }
        .label{
          padding: 0 .5rem;
          background: rgba(236,227,170,0.45);
          color: #CB9407;
        }
      }
    }

    .card_right {
      display: flex;
      align-items: center;

      .price_box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        letter-spacing: -0.2rem;
        margin: 0 1rem;

        .market_price {
          text-decoration: line-through;
          font-size: 1.4rem;
          color: #999999;
          text-align: right;
          letter-spacing: 0.2px;
        }

        .price {
          white-space: nowrap;
          font-size: 1.2rem;
          color: #ED6316;

          .number {
            font-size: 2.2rem;
            padding: 0 .1rem;
          }
          .qi{
            font-size: 1.4rem;
          }
        }
      }

      .book_button {
        height: 3rem;
        background: var(--van-primary-color);
        border-radius: .5rem;
        font-size: 1.4rem;
        color: #FFFFFF;
        line-height: 3rem;
        padding: 0 1.5rem;
        white-space: nowrap;
      }

      .book_button:active {
        background-color: var(--van-primary-button-active-color);
      }
    }
  }
}

.van-stepper>.van-stepper__input {
  width: 5rem !important;
}

</style>